<template>
  <panel title="商品列表">
    <!-- 查询条件 -->
    <el-row>
      <el-col :span="12" style="display:flex; align-items: center;">
        商品名： <el-input style="width: 80%" v-model="searchInfo.name"></el-input>
      </el-col>
      <el-col :span="12">
        商品类型： <el-select v-model="searchInfo.category">
          <el-option v-for="item in cateList" :key="item.id" :label="item.cateName" :value="item.cateName"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-button @click="getGoodsList">搜索</el-button>
    </el-row>
    <el-table :data="goodsList">
      <el-table-column type="expand">
        <!-- 扩展行的内容 -->
        <template slot-scope="scope">
          <el-row>
            <el-col :lg="12" :md="6" >商品名字：{{scope.row.name}}</el-col>
            <el-col :lg="12" :md="18">价格： {{ scope.row.price }}</el-col>
          </el-row>
          
        </template>
      </el-table-column>
      <el-table-column label="商品名字" prop="name"></el-table-column>
      <el-table-column label="分类" prop="category"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="图片">
        <!-- 作用域插槽 -->
        <template slot-scope="scope">
          <img width="50px" height="50px" :src=" 'http://1.15.179.44:3001' + scope.row.imgUrl" alt="" srcset="">
        </template>

      </el-table-column>
      <el-table-column label="描述" prop="goodsDesc"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="editGoods(scope.row)">编辑</el-button>
          <el-button type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <goods-form :defaultForm="curGoods" type="edit" @success="success"></goods-form>
    </el-dialog>

    <el-pagination
      @current-change="pageChange"
    :current-page="pageinfo.currentPage"
    :page-size="pageinfo.pageSize"
    @size-change="sizeChange"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
    </el-pagination>
  </panel>
</template>

<script>
import { goodslistReq, catelistReq, goodsEditReq } from "@/api/goods.api";
import { clearObject } from "@/utils/common";
import GoodsForm from "./components/goodsForm.vue";
export default {
  components: { GoodsForm },
  data() {
    return {
      dialogVisible: false,
      // 商品分类列表
      cateList: [],
      pageinfo: {
        currentPage: 1,
        pageSize: 10
      },
      searchInfo: {
        name: "",
        category: ""
      },
      total: 0,
      goodsList: [],
      // 当前点击的那一项商品
      curGoods: {}
    };
  },
  methods: {
    sizeChange(pageSize) {
      this.pageinfo.pageSize = pageSize;
      get.getGoodsList();
    },
    pageChange(currentPage) {
      this.pageinfo.currentPage = currentPage;
      this.getGoodsList();
    },
    async getGoodsList() {
      let params = { ...this.pageinfo, ...this.searchInfo };
      // params格式化： 把里面没有值的属性给删掉
      clearObject(params);
      const res = await goodslistReq(params);
      this.goodsList = res.data.data;
      this.total = res.data.total;
    },
    // 编辑商品
    editGoods(row) {
      console.log(row);
      this.dialogVisible = true;
      this.curGoods = row;
    },
    // 子组件校验通过，form为表单数据，传给后端的
    success(form) {
      // 编辑商品
      goodsEditReq(form).then(res => {
        if (res.data.code === 0) {
          this.dialogVisible = false;
          // 编辑成功之后，查询一次
          this.getGoodsList();
        }
      });
    }
  },
  async created() {
    this.getGoodsList();
    const res = await catelistReq();
    console.log(res);
    this.cateList = res.data.data;
  }
};
</script>

<style lang="less" scoped>
</style>